<template>
    <div class="loginin">
        <!-- <div class="header">
            <div class="left lf">
              <span class="closeLogin" @click="closelogin"></span>
            </div>
            <h1>{{title}}</h1>
        </div> -->
        <div class="headerTitle">手机登录</div>
        <div class="am-login">
            <div class="account">
                <span>手机号</span>
                <input type="text" maxlength="11" v-toggleInput @focus="toggleWechatLogin($event)"  autocomplete="off" placeholder="输入手机号" v-model="account">
                <!-- <i v-if="account" class="del-btn" v-del="account"></i> -->
            </div>
            <div class="password">
                <span>验证码</span>
                <input type="number" maxlength="20" v-toggleInput @focus="toggleWechatLogin($event)" autocomplete="off" placeholder="输入验证码" v-model="pwd">
                <!-- <i v-if="pwd" class="del-btn" v-del="pwd"></i> -->
                <div class="getAuth"><input v-getCode @click="getCode" :name="account" value="获取验证码" type="button" ></div>
            </div>
            <!-- <div class="shortcut">
                <router-link :to="'/login/phone?redirect=' + prevUrl" class="register">快捷登录</router-link>
            </div> -->
            <div :class="{submit: true, ok: ableNext}" @click="logining" v-btn>登录</div>
            <!-- <div class="otherHandle clear">
                <router-link :to="'/login/register?redirect=' + prevUrl" class="register">免费注册</router-link>
                <router-link :to="'/login/findpwd?redirect=' + prevUrl" class="forgot">忘记密码？</router-link>
            </div> -->
        </div>
        <div class="wechatLogin" @click="wechactLogin"> <i></i>使用微信登录</div>
    </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      title: this.$route.name,
      ableNext: false,
      account: "",
      pwd: "",
      prevUrl: this.$route.query.redirect,
      originUrl: "",
      isAndroid: ""
    };
  },
  components: {},
  mounted() {
  
    this.fn.getLatitude();

    if (this.fn.GetQueryString("token")) {
      this.fn.addcookie("key", this.fn.GetQueryString("token"), 30 * 24);
      this.$router.push({ path: "/" });
    }
    this.isAndroid = this.fn.isIponeX("Android");
  },

  methods: {
    toggleWechatLogin() {
      if (this.isAndroid) {
        // 解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题
        var weLoginBtn = document.querySelector(".wechatLogin");
        weLoginBtn.style.position = "static";
      }
    },
    getCode() {
      var vm = this;
      if (!this.fn.is_tel(this.account)) {
        return this.fn.tip("手机号码有误");
      }
      this._ajax({
        url: this.fn.xqq + "getCode",
        method: "post",
        data: {
          tel: this.account
        },
        callback(db) {
          if (db.errorCode == 200) {
            vm.fn.tip("验证码发送成功");
          } else {
            vm.fn.tip(db.msg);
          }
        }
      });
    },
    logining() {
      let _this = this;

      if (_this.ableNext) {
        _this._ajax({
          url: _this.fn.xqq + "loginPhone",
          method: "post",
          data: {
            mobilePhone: _this.account,
            code: _this.pwd
          },
          callback(db) {
            if (db.errorCode == 200) {
              _this.fn.addcookie("key", db.datas.token, 30 * 24);

              if (_this.prevUrl) {
                _this.$router.push({ path: _this.prevUrl });
              } else {
                _this.$router.push({ path: "/" });
              }
            } else {
              _this.fn.tip(db.msg);
            }
          }
        });
      }
    },
    wechactLogin() {
      let vm = this;
      // loginWeChat
      //  callBackUrl: location.origin + location.pathname + "#/memberCardDetail/" + self.$route.query.id,
      //   cancelUrl: location.origin + location.pathname + '#/UserCenter',
      this._ajax({
        url: this.fn.xqq + "loginWeChat",
        method: "post",
        data: {
          callBackUrl:
            location.origin +
            location.pathname +
            "#/login/loginin?token=tokenVal",
          cancelUrl:
            location.origin + location.pathname + "#/login/PinlessPhone"
        },
        callback(db) {
          if (db.errorCode == 200) {
            console.log(db);
            db.datas.payUrl && (window.location.href = db.datas.payUrl);
          } else {
            vm.fn.tip(db.msg);
          }
        }
      });
    },
    closelogin() {
      if (/login/g.test(this.originUrl) || this.originUrl) {
        this.$router.push({ path: "/" });
      } else {
        this.$router.go(-1);
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(el => {
      el.originUrl = from.path;
    });
  },
  watch: {
    account() {
      this.ableNext = this.fn.authFn([this.account, this.pwd]);
    },
    pwd() {
      this.ableNext = this.fn.authFn([this.account, this.pwd]);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/css/login.scss";
.loginin .am-login .submit{
  font-size:.8rem;
}
.headerTitle{
  font-size: 2rem;
  line-height: 2rem;
  text-align: left;
  padding-left: 0.75rem;
  color: #333333;
  padding-top:2.5rem; 

}
.loginin .am-login .password input {
  width: 5rem;
}
.loginin .am-login{
  padding-top: 1.8rem;
}
.wechatLogin {
  width: 86.4%;
  height: 2.2rem;
  border: solid 1px #48bd1e;
  margin: 0 auto;
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.1rem;
  color: #48bd1e;
  i {
    display: inline-block;
    width: 0.9rem;
    height: 0.75rem;
    background: url(../../assets/wechat.png) no-repeat center center;
    background-size: 100%;
    margin-right: 0.5rem;
  }
}
</style>
